<template>
  <div>
    <div class="search">
      <svg t="1608544398869" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3004" width="0.2rem" height="0.2rem">
        <path d="M870.5 827.4L682.8 639.7c45-55.4 69.5-124 69.5-196.4 0-83.5-32.5-161.9-91.5-220.9s-137.5-91.5-221-91.5-161.9 32.5-220.9 91.5-91.5 137.4-91.5 220.9 32.5 161.9 91.5 220.9 137.4 91.5 220.9 91.5c73.6 0 143.3-25.3 199.2-71.8l187.5 187.5c12.1 12.1 31.9 12.1 44 0 12.1-12 12.1-31.8 0-44zM439.8 693.6c-137.9 0-250.1-112.2-250.1-250.1s112.2-250.2 250.1-250.2 250.1 112.2 250.1 250.1-112 250.2-250.1 250.2z" p-id="3005" fill="#cdcdcd">
        </path>
      </svg>
      <input type="text" v-model="searchValue" placeholder="搜索歌曲、歌手、专辑" id="search" 
      @keyup.enter="handleSearch" 
      @input="onChangeValue($event)"
      >
    </div>
 
    <div class="load" v-show="isShowLoad">
      <img src="../../assets/img/dongcidaci.gif" alt="">
    </div>

    <div ref="tip" class="tip" v-show="isShowTip">

      </div>
    <ul class="result" v-show="isShowResult">
      <li class="ser" @click="handleSearch" >
        搜索"{{searchValue}}"
      </li>
      <li v-for="(v,i) in searchData" :key="i" @click="handleSearchData(v)" >
        <span class="clock">
        <svg t="1608544398869" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3004" width="0.2rem" height="0.2rem"><path d="M870.5 827.4L682.8 639.7c45-55.4 69.5-124 69.5-196.4 0-83.5-32.5-161.9-91.5-220.9s-137.5-91.5-221-91.5-161.9 32.5-220.9 91.5-91.5 137.4-91.5 220.9 32.5 161.9 91.5 220.9 137.4 91.5 220.9 91.5c73.6 0 143.3-25.3 199.2-71.8l187.5 187.5c12.1 12.1 31.9 12.1 44 0 12.1-12 12.1-31.8 0-44zM439.8 693.6c-137.9 0-250.1-112.2-250.1-250.1s112.2-250.2 250.1-250.2 250.1 112.2 250.1 250.1-112 250.2-250.1 250.2z" p-id="3005" fill="#cdcdcd"></path></svg>
        </span>
        {{v.name}}____{{v.singer}}
      </li>
    </ul>


    <ul class="history" v-show="isShowHistory">
        热门搜索
      <div>
        <button id="hotBtn" v-for="(v,i) in hotSearch" :key="i">{{v.txtData.txtCotent}}</button>
      </div>
  
      <li 
        v-for="(v,i) in searchHistory" 
        :key="i" 
        
        >
          <span class="clock">
          <svg t="1608551755238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4312" width="0.2rem" height="0.2rem"><path d="M702.103704 533.807407h-0.18963l-190.103704-1.517037c-11.757037-0.094815-21.238519-9.765926-21.143703-21.522963 0.094815-11.757037 9.765926-21.238519 21.522963-21.143703l190.103703 1.517037c11.757037 0.094815 21.238519 9.765926 21.143704 21.522963-0.094815 11.662222-9.671111 21.143704-21.333333 21.143703z" p-id="4313" fill="#8a8a8a"></path><path d="M512 128c51.863704 0 102.115556 10.145185 149.428148 30.151111 45.700741 19.342222 86.755556 47.028148 122.026667 82.299259 35.271111 35.271111 62.957037 76.325926 82.299259 122.026667 20.100741 47.407407 30.245926 97.659259 30.245926 149.522963s-10.145185 102.115556-30.151111 149.428148c-19.342222 45.700741-47.028148 86.755556-82.299259 122.026667s-76.325926 62.957037-122.026667 82.299259c-47.407407 20.100741-97.659259 30.245926-149.522963 30.245926s-102.115556-10.145185-149.428148-30.151111c-45.700741-19.342222-86.755556-47.028148-122.026667-82.299259s-62.957037-76.325926-82.299259-122.026667c-20.100741-47.407407-30.245926-97.659259-30.245926-149.522963s10.145185-102.115556 30.151111-149.428148c19.342222-45.700741 47.028148-86.755556 82.299259-122.026667 35.271111-35.271111 76.325926-62.957037 122.026667-82.299259 47.407407-20.100741 97.659259-30.245926 149.522963-30.245926m0-42.666667C276.385185 85.333333 85.333333 276.385185 85.333333 512s191.051852 426.666667 426.666667 426.666667 426.666667-191.051852 426.666667-426.666667S747.614815 85.333333 512 85.333333z" p-id="4314" fill="#8a8a8a"></path><path d="M512 532.29037c-11.757037 0-21.333333-9.576296-21.333333-21.333333v-237.037037c0-11.757037 9.576296-21.333333 21.333333-21.333333s21.333333 9.576296 21.333333 21.333333v237.037037c0 11.757037-9.576296 21.333333-21.333333 21.333333z" p-id="4315" fill="#8a8a8a"></path></svg>
          </span>

        <span 
          class="spanText"
          @click="handleSearchHistory(v)"
          >{{v}}</span>
        <span id="delete" @click="handleDelete(i)">
          <svg t="1608552426659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4809" width="0.2rem" height="0.2rem"><path d="M558.096874 509.244236l278.304494-276.863678c13.159718-13.094226 13.226233-34.31248 0.132006-47.472198-13.123902-13.189394-34.305317-13.226233-47.465035-0.132006L510.692215 461.669708 234.740302 184.877661c-13.062504-13.093203-34.310434-13.159718-47.470151-0.066515-13.129019 13.093203-13.160741 34.342156-0.066515 47.501874l275.885398 276.725532L184.918593 785.733385c-13.160741 13.094226-13.226233 34.310434-0.134053 47.472198 6.54609 6.581905 15.172561 9.900487 23.799032 9.900487 8.56098 0 17.125029-3.252067 23.672142-9.768481l278.236955-276.761348 278.473339 279.31245c6.54609 6.582929 15.142885 9.871835 23.768333 9.871835 8.594749 0 17.155728-3.288906 23.701818-9.80532 13.123902-13.093203 13.159718-34.305317 0.066515-47.465035L558.096874 509.244236 558.096874 509.244236zM558.096874 509.244236" p-id="4810" fill="#707070"></path></svg></span>
      </li>
    </ul>
  
    <MusicList :isshow="true"  v-show="isShowList" :list="searchList" :so0001rt='false' > 

    </MusicList>

  </div>

  
</template>

<script lang="ts">
import { Vue , Prop , Component , Watch } from 'vue-property-decorator'
import { get } from '../../utils/http'
import MusicList from "../../components/MusicList.vue";
// import { Search } from 'vant'
// Vue.use(Search)

@Component({
  components:{
    MusicList
  }
})
export default class Searchx extends Vue{
  searchValue:string = ''
  searchData:Array<object> = []
  searchList:Array<object> = []
  searchHistory:Array<string>=Object.keys(sessionStorage)
  isShowResult:boolean = false
  isShowHistory:boolean = true
  isShowList:boolean = false
  isShowLoad:boolean = false
  hotSearch:Array<string> = []
  list:Array<object> = []
  isShowTip:boolean = false


  //初次渲染 
  mounted(){
    this.get_hotSearch()
  }

  //请求热搜数据
  async get_hotSearch(){
    const tempData  = await get({
    url:'/api/migu/list',
    params:{
      migu_url:'https://m.music.migu.cn/migu/remoting/cms_list_tag?pageSize=10&nid=24041523&pageNo=0&type=2005',
    }})
    // console.log(tempData.data.result.results)
    this.hotSearch = tempData.data.result.results
  }

  //enter键click事件
  handleSearch(){
    this.isShowLoad = true
    this.get_searchList()
    sessionStorage.setItem(`${this.searchValue}`,`${this.searchValue}`)
    // console.log(Object.keys(sessionStorage))
    // this.searchHistory = Object.keys(sessionStorage)
    this.searchHistory.push(this.searchValue)
    this.isShowHistory = false
    this.isShowResult = false
  }

  //点击历史搜索
  handleSearchHistory(value){
    this.isShowLoad = true
    console.log('搜索历史');
    this.searchValue=value;
    (this as any).$store.commit("change_searchResult", value)
    this.get_searchList()
    this.isShowHistory = false
    this.isShowResult = false
  }

  // handleCancel(){
  //   console.log('handleCancel');
    
  //   this.isShowResult = false
  //   this.isShowHistory = true
  //   this.isShowList = false
  // }


    // 搜索结果点击事件
    handleSearchData(v){
      
      (this as any).$store.commit("change_searchResult", `${v.name}` + `${v.singer}`)
      this.searchValue = `${v.name}` + `${v.singer}`
      this.handleSearch()
      this.isShowHistory = false
      this.isShowResult = false
      // console.log(this.isShowResult);
    }
  //删除一条
  handleDelete(i){
    let item = this.searchHistory.splice(i,1).toString()
    sessionStorage.removeItem(`${item}`)
    // this.searchHistory.splice(i,1)
  }

  //请求搜索数据
  async get_searchData(newValue){
    const data = await get({
      url:"/api/migu/list",
      params:{
        migu_url:`https://m.music.migu.cn/migu/remoting/autocomplete_tag?keyword=${new URLSearchParams(newValue
        ).toString()}`
      }
    }).then(res=>{
        // console.log(res.data.key.slice(0,7))
        this.searchData = res.data.key.slice(0,7)
        
      })
  }


    //请求搜索列表数据
    async get_searchList(){
      this.isShowTip = false
      this.searchList = []
      const tempData:any  = await get({
        url:'/api/migu/list',
        params:{
          migu_url:`https://m.music.migu.cn/migu/remoting/scr_search_tag?rows=30&type=2&keyword=${new URLSearchParams(
            (this as any).$store.state.searchResult
          ).toString()}`
        },
      }).catch((err) => {
        this.isShowLoad = false
      })
      // console.log(tempData);
      


      try {
        const data = tempData.data.musics
        const dataLength = tempData.data.musics.length
        this.isShowLoad = false
        for(let i = 0 ; i < dataLength ; i++){
          this.searchList.push({songData:{singerName:{"0":""},relationTitle:""}})
        }
  
        this.searchList.forEach((item:any,i) => {
          item.songData.singerName["0"] = data[i].singerName
          item.songData.relationTitle = data[i].title
          item.songData.copyrightId=data[i].copyrightId
        })
        this.isShowList = true

      } catch (error) {
        this.isShowTip = true
        this.isShowLoad = false
        this.isShowHistory = true;
        (this as any).$refs.tip.innerHTML= "没有这首歌曲的信息"
      }
  }



  // 监听输入内容
  // @Watch('searchValue')
  onChangeValue(e){
    let newValue:String  = e.target.value
    this.get_searchData(newValue)
    if(newValue!==''){
      this.isShowResult = true
      this.isShowHistory = false
      this.isShowList = false
      this.isShowTip = false
    }if(newValue==''){
      this.isShowResult = false
      this.isShowHistory = true
      this.isShowList = false
    }
    (this as any).$store.commit("change_searchResult", newValue)
    // console.log((this as any).$store.state.searchResult)
  }


}
</script>

<style lang="stylus" scoped>
  .search
    margin 0.2rem auto 0.2rem auto
    width 95%
    border-radius 0.2rem
    position relative
    background-color #ebecec
    svg
      margin-top 0.07rem
      margin-left 0.1rem
      margin-right 0.1rem

  #search
    background-color #ebecec
    position absolute
    width 86%
    height 0.3rem
    top 0.03rem
    border 0

  .result>li
    margin .05rem auto .1rem
    line-height 0.4rem
    font-size 0.16rem
    border-bottom 1px solid rgb(234,235,236)
  .ser
    color rgb(64,104,159)
    font-size .14rem

  .icon
    display inline

  .load
    position relative
    left 50%
    top .4rem
    margin-top .3rem
    img
      width .2rem
      height .2rem

  .history
    position relative
    margin-top 0.1rem
    li
      height .4rem
      position relative
      margin-top 0.1rem
      font-size 0.2rem
      border-bottom 1px solid rgb(234,235,236)
      padding-bottom 0.06rem
      svg
        position absolute
        top 0.04rem
      span

        margin-left 0.25rem
      .spanText
        line-height .3rem
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size .16rem
        display inline-block
        width 80%
      #delete
        position absolute
        right 0.3rem
      .clock
        padding-right 0.1rem
    div
      margin-bottom .2rem
      #hotBtn
        border-radius 0.2rem
        border 1px solid rgb(225,226,230)
        display inline
        margin-left 0.2rem
        padding 0.07rem 0.1rem
        margin-top 0.1rem
        background-color white

  .tip
    color grey
    text-align center
    margin-top .3rem

</style>